<template>
    <div class="main-top">
        <v-header />
    </div>
    <div class="main-content">
          <v-sidebar />
          <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <div class="content">
                <router-view v-slot="{ Component }">
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <component :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view>
                <!-- <el-backtop target=".content"></el-backtop> -->
            </div>
        </div>
    </div>
</template>
<script>
import vHeader from "../../components/layout/Header";
import vSidebar from "../../components/layout/Sidebar";
import vTags from "../../components/layout/Tags.vue";
export default {
    components: {
        vHeader,
        vSidebar,
        vTags
    },
    computed: {
        tagsList() {
            return this.$store.state.tagsList.map(item => item.name);
        },
        collapse() {
            return this.$store.state.collapse;
        }
    }
};
</script>
<style scoped>
.main-top{
    width: 100%;
    height: 6vh;
}
.main-content{
    width: 100%;
    margin-top: 0.2vh;
    height: 93.8vh;
    display: flex;
}
.content-box {
    flex-grow: 1;
    padding-bottom: 30px;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: #f0f0f0;
}
.content {
    padding: 3px;
    box-sizing: border-box;
}
</style>